<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>后台商品SKU</title>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all">
        <style>
            #sku-table thead tr th i,
            #sku-table tbody tr td img {
                cursor: pointer;
            }
        </style>
	</head>
	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
					<legend>商品规格</legend>
				</fieldset>

				<form class="layui-form" id="layuiButtonActive" action="">
					
					<div class="layui-form-item">
						<div class="layui-input-block">
                            
							<div class="layui-row" id="specss_value">
								
								<button data-method="specsType" type="button" class="layui-btn">选择规格</button>
								
								<div class="layui-form" id="SKU_TYPE"></div>
								<div id="skuTable"></div>
							
							</div>
						</div>
					</div>

				</form>
			</div>
		</div>

		<script src="js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
		<script src="js/layui/layui.js" charset="utf-8"></script>
		<script>
            
            layui.config({
                base: "./js/",
                version: true
            }).extend({
                laySku: 'laySku/laySku', //  Sku 
            });
            
			layui.use(['form', 'layer', 'laySku'], function() {
				var form = layui.form,
                    layer = layui.layer,
					laySku = layui.laySku;
				
                var specsValueData = [];
                
                var active = {
                	specsType: function () {
                		layer.open({
                            type: 2,
                            title: '选择规格',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['70%', '70%'],
                            content: "dialog.html", //iframe的url
                            btn: ['确定', '关闭'],
                            yes: function(index,layero ){                          
                                // 执行子页面 getSpecsData() 函数， 获取数据
                                var SpecsData = window[layero.find('iframe')[0]['name']].getSpecsData();
                                if (SpecsData.id != undefined) {
                                    specsValueData.push(SpecsData);
                                    setSpecsTabled();
                                }
                                layer.close(index);
                            }
                		});
                	}
                }
                
                
                window.setSpecsTabled = function () {
                    // 渲染 SKU
                    var sku = new laySku({
                        id:'SKU_TYPE',//checkbox选择框
                        container_id:'skuTable',//容器id渲染table
                        data:specsValueData,//数据类型
                        rowReturn:true,//是否绑定tr单击事件
                        // 绑定tr单击事件执行的操作
                        rowMaster:function(res){
                            console.log(res)
                        },
                        btn:'skuSubmit',//按钮提交
                        //提交之后的某些操作
                        skuSubmitBind:function(res){
                            console.log(res)
                        }
                    })
                    sku.init()
                }
                
                $('#layuiButtonActive .layui-btn').on('click', function(){
                	var othis = $(this), method = othis.data('method');
                	active[method] ? active[method].call(this, othis) : '';
                });

			});
		</script>
	</body>
</html>
